<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>云道首页元素分析</title>
    <link rel="stylesheet" href="css/index.css">
    <style type="text/css">
           #linkdiv{
               font-size: 24px;
           }
    </style>

</head>
<body>
<div ><a id="linkdiv" href="index1.html">分析网页示例</a><br></div>
<!--顶部导航栏-->
<div class="header">
    <div class="inner">

        <div class="logo">
            <a href="http://yundao.com">  <img src="images/logoi.png" alt=""></a>
        </div>

        <div class="nav"><!--导航栏-->
            <ul>
                <li><a href="#">链接</a></li>
                <li><a href="#">链接</a></li>
                <li><a href="#">链接</a></li>
                <li><a href="#">链接</a></li>
                <li><a href="#">链接</a></li>
                <li><a href="#">链接</a></li>
                css文件中采用text-decoration: none;进行修饰。height设置菜单导航栏的高度

            </ul>
        </div>

    </div>
    <p>logo采用左浮动整体上位于导航栏的左边，导航栏布局采用右浮动策略(除去注释文字，整个链接处于导航栏的右部)，链接上下的填充采用左浮动</p>
</div>
<!--banner图-->
<div class="banner">

</div>


<p align="center">服务模块上部是整个logo，下部是服务模块</p>
<p align="center">整个服务模块的父体采用width:1055px; margin:75px auto 0;来设置整体布局</p>
<!--我们的服务模块-->
<div class="service">
    <div class="service-hd">
        <h3><img src="images/logoi.png" alt=""></h3>
        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        <p>服务模块的标题部分采用border-top:1px solid #ccc; margin:0 25px;设置最上部的div，设置上边距和线条还有间距</p>
        <p>其中文字部分采用    font-size:12px;
            color:#666;
            line-height: 26px;
            text-align: center;
            width: 830px;
            margin:15px auto 0;进行设置，包括字体大小，文字格式，居中设置等从整体上进行考虑</p>
    </div>
    <div class="service-bd">
        <ul>
            <li>
                <img src="images/logoi.png" alt="">
                <h3>xxxx</h3>
                <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx          xxxxxxxxxxxxxxxxxxx           xxxxxxxxxxxxxxxxxxxxxxx        xxxxxxxxxxxxxxxxxxx
                    <a href="#">xxxx</a>
            </li>

            <li class="yingxiao">
                <img src="images/logoi.png" alt="">
                <h3>xxxx</h3>
                <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx             xxxxxxxxxxxxxxxx         xxxxxxxxxxxxxxxxxxxxxxxxxx       xxxxxxxxxxxxxxxxxxxxx
                    <a href="#">xxxx</a>
            </li>

            <li>
                <img src="images/logoi.png" alt="">
                <h3>xxxx</h3>
                <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx       xxxxxxxxxxxxxxxxxxxxx      xxxxxxxxxxxxxxxxxxxxx         xxxxxxxxxxxxxxxxxxxx</p>
                <a href="#">xxxx</a>
            </li>
        </ul>

    </div>
    <p>1. 三个模块并列overflow 属性规定当内容溢出元素框时的处理情况(在父体中定义，适用于除了整体标题下的全部div块)</p>
    <p>2. 三个模块采取左浮动策略进行排列 text-align策略采用居中，其中的logo设置margin进行整体上的居中考虑，再设置三个模块中的字体大小和格式进行契合
        width: 234px;
        font-size:12px;
        color:#666;
        margin: 0 auto;
        line-height: 26px;</p>
    <p> 3. display:block;
        width: 148px;
        height: 38px;
        border:1px solid  #ff9412;
        margin:0 auto;
        text-align:center;
        line-height: 38px;
        font-size:12px;
        color:#ff9412 ;
        border-radius:5px;是在三个模块中的按钮设置，其中display代表是否显示，常规的长和宽设置，边框线设置，整体剧中，按钮文字居中，文字大小和颜色设置</p>
    <p> 4. color:#fff;
        background: #ff9412 ;设置鼠标悬停在按钮上的的显示格式加强交互感</p>
    <p>5. .yingxiao{
        margin: 0 45px;
        }设置三个logo在父块中的位置实现视觉上的三等分</p>
</div>






<!--页面底部-->
<div class="footer">
    <div class="subnav">
        <a href="#">链接</a> |
        <a href="#">链接</a> |
        <a href="#">链接</a> |
        <a href="#">链接</a> |
        <a href="#">链接</a> |
        <a href="#">链接</a> |
        <a href="#">链接</a> |
        <a href="#">链接</a> |
        <a href="#">链接</a> |
    </div>
    <p>@Copyright 2015 xxxxxxxxxxxxxxx | xxICP备xxxxxxxxxxxxx号 -x</p>
</div>
<p>1.     height: 165px;
    background: #212425;
    overflow: hidden;
    margin-top: 100px;设置最底部模块的高度，背景色，文字溢出处理方式和格式</p>
<p>2.     text-align: center;
    margin-top: 50px;
    color:  #f0f1f1;作为连接之间的间隔元素进行居中设置，距上部的margin设置和颜色</p>
<p>3. .subnav a{
    color: #f0f1f1;
    padding: 0 5px;
    font-size: 14px;
    }
    .subnav a:hover{
    color:#2288f6;
    text-decoration: underline;
    }连接元素的颜色，块中位置和链接文字大小设置，还有鼠标悬停效果设置</p>
</body>
</html>